<template>
	<view class="dynaInfo">
		<navBar isBack backColor="#333" background="#fff"></navBar>
		<view class="content">
			<view class="top" v-if="dynaInfo.type==0">
				<view class="imgBox" v-if="Array.isArray(dynaInfo.media)">
					<image :src="item.path" mode="" v-for="(item,index) in dynaInfo.media" :key="index" @click="toViewImg(index,dynaInfo.media)"></image>
				</view>
				<view class="imgBox" v-else>
					<image :src="dynaInfo.media.path" mode="" :key="index" @click="toViewImg(0,dynaInfo.media)"></image>
				</view>
			</view>
			<view class="top" v-else>
				<view class="imgBox" v-if="Array.isArray(dynaInfo.media)">
					<video :src="item.path" mode="" v-for="(item,index) in dynaInfo.media" :key="index" controls></video>
				</view>
				<view class="imgBox" v-else>
					<video :src="dynaInfo.media.path" mode="" :key="index" controls></video>
				</view>
			</view>
			<!-- 动态店铺 -->
			<view class="S_stop" v-if="dynaInfo.store.store_name" @tap="toPageurl(dynaInfo.store.id)">
				<view class="S_Head">
					<view class="S_Image"><image :src="dynaInfo.store.store_logo.path ? dynaInfo.store.store_logo.path : '../../../../static/my/toux.png'"></image></view>
					<view class="S_stopName">{{ dynaInfo.store.store_name ? dynaInfo.store.store_name : '*****' }}</view>
				</view>
				<text class="iconfont icon-more iconfontMore"></text>
			</view>
			<view class="mid">
				<view class="quest">
					<image :src="`${baseImg}/static/adminShop/askTalk.png`" mode=""></image>
					<text style="max-width: 580rpx;" class="omit-1">{{dynaInfo.title}}</text>
				</view>
				<!-- <view class="shareTit">智能家居的干货分享</view> -->
				<view class="contentText">
					{{dynaInfo.content}}
				</view>
				<view class="time">
					{{$utils.getTimeRelation(dynaInfo.create_time*1000)}}
					<text v-if="dynaInfo.type==1" style="margin-left: 30rpx;">播放量：{{dynaInfo.video_num}}</text>
				</view>
			</view>
			<!-- 包含商品 -->
			<view class="G_goodsView" v-if="Product.length > 0" @click="GoodsShow = true">
				<view class="G_goodsLeft">图中包含商品（{{ Product.length }}）：</view>
				<view class="G_goodsList">
					<view class="G_goodsFor">
						<view class="G_goodsItem" v-for="(item, index) in Product" :key="index" v-if="index < 3">
							<!-- <image :src="item.main_imgurl.path"></image> -->
							<u-image width="100%" height="100%" :src="item.main_imgurl.path" :lazy-load="true"></u-image>
						</view>
					</view>
					<view class="G_goodsIcon"><image :src="`${baseImg}/static/adminShop/icon_more.png`"></image></view>
				</view>
			</view>
			
			<view class="bottom">
				<view class="tabNav">
					<view class="left">
						<view class="forward" :class="{'navActive':forward==1}" @click="change1">
							<text :class="{'text':forward==1}">转发（{{dynaInfo.forward_num}}）</text>
						</view>
						<view class="forward" :class="{'navActive':forward==2}" @click="change2">
							<text  :class="{'text':forward==2}">评论（{{dynaInfo.comment_num}}）</text>
						</view>
					</view>
					<view class="toStar" :class="{'navActive':forward==3}" @click="change3">
						<text  :class="{'text':forward==3}">点赞（{{dynaInfo.support_num}}）</text>
					</view>
				</view>
				<!-- 转发 -->
				<view class="forList" v-if="forward==1">
					<view class="item" v-for="(item,index) in forList" :key="index">
						<image :src="item.user_id.avatar.path" mode=""></image>
						<view class="right">
							{{item.user_id.username}}
							<view class="time">
								<span>转发动态</span>{{$utils.getFormatDate(item.create_time*1000,'MM-dd hh:mm')}}
							</view>
						</view>
					</view>
				</view>
				<!-- 评论 -->
				<view class="list" v-if="forward==2">
					<view class="item" v-for="(item1,index1) in askList" :key="index1" @click="replyOne(item1)">
						<image :src="item1.user_id.avatar.path" mode=""></image>
						<view class="ask">
							<view class="name">{{item1.user_id.username}}</view>
							<view class="info">{{item1.content}}<span>{{$utils.getTimeRelation(item1.create_time*1000)}}</span></view>
							<view class="askList">
								<view class="item" v-for="(item2,index2) in item1.sub_reply" :key="index2" @click.stop="replyChild(item2)">
									<image :src="item2.user_id.avatar.path" mode=""></image>
									<view class="ask">
										<view class="name">{{item2.user_id.username}}</view>
										<view class="info">
											<view>回复<span>{{item2.reply_id.username}}</span>：{{item2.content}}<span>{{$utils.getTimeRelation(item2.create_time*1000)}}</span></view>
											<!-- <view>我们家就是这样设计的我们家就是这样设计的我们家就是这样设计的我们家就是这样设计的<span>刚刚</span></view> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 点赞 -->
				<view class="forList" v-if="forward==3">
					<view class="item" v-for="(item,index) in starList" :key="index">
						<image :src="item.user_id.avatar.path" mode=""></image>
						<view class="right">
							{{item.user_id.username}}
							<view class="time">
								<span>赞了你的动态</span>{{$utils.getFormatDate(item.create_time*1000,'MM-dd hh:mm')}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 回复 -->
		<view class="replyInput" v-if="forward==2">
			<input type="text" value="" @confirm="sendReply" confirm-type="发送" v-model="replyContent" :placeholder="replyText" />
		</view>
		
		<!-- 商品框 -->
		<u-popup id="popupView" v-model="GoodsShow" height="1000" mode="bottom" border-radius="14" :closeable="true" :safe-area-inset-bottom="true" style="position: relative;">
			<view>
				<view class="popupTitle">图中包含商品</view>
				<view class="ScrollList">
					<view class="ListItem" v-for="(item, index) in Product" :key="index" @click="toProduct(item.id)">
						<view class="listLeft">
							<view class="ListImage">
								<!-- <image :src="item.main_imgurl.path"></image> -->
								<u-image width="100%" height="100%" :src="item.main_imgurl.path" :lazy-load="true"></u-image>
							</view>
							<view style="flex: 1;">
								<view class="ListTitle TextLenght">{{ item.product_title }}</view>
								<view class="ListShop">{{ item.store_name }}</view>
								<view class="ListPirce">¥{{ item.price }}</view>
							</view>
						</view>
						<text class="iconfont icon-more" style="font-size: 30rpx;font-weight: bold;color: #CCCCCC;"></text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				baseImg:this.$static,
				forward:2,
				trend_id:null,
				dynaInfo:{},
				askList:[],
				forList:[],
				starList:[],
				replyObj:{}, //回复对象
				replyText:'我也说一句~', //评论框的placeholder
				replyContent:'', //回复的内容
				replyStatus:false, //回复还是自己评论，false评论，true回复
				GoodsShow:false,
				Product: [],
				page:1,
				pagesize:10
			}
		},
		onLoad(options) {
			this.trend_id = options.trend_id
			this.getDynaDetail()
			this.getAskList()
			// this.getForList()
		},
		onReachBottom() {
			if(this.forward==1){
				this.getForList('onReach')
			}else if(this.forward==2){
				this.getAskList('onReach')
			}else{
				this.getStarList('onReach')
			}
		},
		methods:{
			// 点击转发
			change1(){
				this.forward = 1
				this.getForList()
			},
			// 点击评论
			change2(){
				this.replyStatus = false
				this.replyText = '我也说一句~'
				this.forward = 2
				this.getAskList()
			},
			// 点击点赞
			change3(){
				this.forward = 3
				this.getStarList()
			},
			// 获取动态详情
			getDynaDetail(){
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					user_id:this.$store.state.index.userId,
					trend_id:this.trend_id
				}
				this.$api.getDynaDetail(params).then(res=>{
					console.log(res,'动态详情')
					if(res.code==1){
						this.dynaInfo = res.data?res.data:{};
						this.getProduct();
					}
				})
				uni.hideLoading()
			},
			// 获取动态商品清单
			getProduct() {
				this.$api
					.getProductList({
						trend_id: this.trend_id
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data;
							console.log(data);
							this.Product = data;
						}
					});
			},
			
			// 跳转店铺
			toPageurl(store_id) {
				uni.navigateTo({
					url: '/pages/mall/store/store?storeId=' + store_id
				});
			},
			// 跳转商品
			toProduct(product_id) {
				uni.navigateTo({
					url: '/pages/mall/goods/goods?id=' + product_id
				});
			},
			
			// 获取动态评论列表
			getAskList(type){
				if(type=='onReach'){
					this.page++
				}else{
					this.page = 1
				}
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					trend_id:this.trend_id,
					page:this.page,
					pagesize:this.pagesize
				}
				this.$api.getDynaAskList(params).then(res=>{
					console.log(res,'评论列表')
					if(res.code==1){
						if(type=='onReach'){
							this.askList = this.askList.concat(res.data)
						}else{
							this.askList = res.data?res.data:[]
						}
					}
				})
				uni.hideLoading()
			},
			
			// 回复第一层
			replyOne(item){
				this.replyObj = item
				this.replyStatus = true
				console.log(item,'第一层')
				this.replyText = '回复：'+item.user_id.username
			},
			// 回复第二层
			replyChild(item){
				this.replyObj = item
				this.replyStatus = true
				console.log(item,'第二层')
				this.replyText = '回复：'+item.user_id.username
			},
			// 回复评论时键盘确定
			sendReply(){
				if(this.replyContent==''){
					uni.showToast({
						title:'请输入内容',
						icon:'none'
					})
				}else{
					// 自己评论
					if(!this.replyStatus){
						let params = {
							user_id:this.$store.state.index.userId,
							trend_id:this.trend_id,
							partner_id:this.$store.state.index.sid,
							partner_type:this.$store.state.index.role,
							content:this.replyContent
						}
						console.log(params,'自己评论的数据')
						this.$api.toDynaAsk(params).then(res=>{
							console.log(res,'自己评论的结果')
							if(res.code==1){
								this.getAskList()
								this.getDynaDetail()
								this.replyContent = ''
								uni.showToast({
									title:'评论成功',
									icon:'success'
								})
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
						})
					}else{ //回复
						let params = {
							user_id:this.$store.state.index.userId,
							comment_id:this.replyObj.id,
							content:this.replyContent
						}
						console.log(params,'回复的数据')
						this.$api.toDynaReply(params).then(res=>{
							console.log(res,'回复的结果')
							if(res.code==1){
								this.getAskList()
								this.getDynaDetail()
								this.replyContent = ''
								this.replyStatus = false
								this.replyText = '我也说一句~'
								uni.showToast({
									title:'回复成功',
									icon:'success'
								})
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
						})
					}
				}
			},
			
			// 获取动态点赞列表
			getStarList(type){
				if(type=='onReach'){
					this.page++
				}else{
					this.page = 1
				}
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					trend_id:this.trend_id,
					page:this.page,
					pagesize:this.pagesize
				}
				this.$api.getStarList(params).then(res=>{
					console.log(res,'评论列表')
					if(res.code==1){
						if(type=='onReach'){
							this.starList = this.starList.concat(res.data)
						}else{
							this.starList = res.data?res.data:[]
						}
					}
				})
				uni.hideLoading()
			},
			
			// 图片预览
			toViewImg(index,data){
				this.$utils.toViewImg(index,data)
			},
			
			// 获取动态转发列表
			getForList(type){
				if(type=='onReach'){
					this.page++
				}else{
					this.page = 1
				}
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					trend_id:this.trend_id,
					page:this.page,
					pagesize:this.pagesize
				}
				this.$api.getForWardList(params).then(res=>{
					console.log(res,'转发列表')
					if(res.code==1){
						if(type=='onReach'){
							this.forList = this.forList.concat(res.data)
						}else{
							this.forList = res.data?res.data:[]
						}
					}
				})
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dynaInfo{
		.content{
			background-color: #fff;
			// width: 100%;
			.top{
				background-color: #fff;
				position: relative;
				width: 100%;
				.imgBox{
					padding: 32rpx 33rpx;
					display: grid;					grid-template-columns: repeat(3, 1fr);					grid-gap: .5rem;
					image{
						border-radius: 8rpx;
						width: 210rpx;
						height: 210rpx;
					}
					video{
						width: 702rpx;
						height: 620rpx;
					}
				}
			}
			// 动态店铺
			.S_stop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 32rpx;
				border-bottom: 1px solid #f5f5f5;
				padding-bottom: 15rpx;
				.S_Head {
					padding-top: 32rpx;
					display: flex;
					align-items: center;
					.S_Image {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						overflow: hidden;
					}
					.S_stopName {
						font-size: 26rpx;
						font-weight: 500;
						color: #666666;
						margin-left: 20rpx;
					}
				}
				.iconfont {
					margin-top: 18px;
					color: #a1a1a1;
				}
			}
			.mid{
				padding: 28rpx 36rpx 40rpx;
				background-color: #fff;
				.quest{
					background-color: rgba(219,169,84,0.1);
					height: 40rpx;
					border-radius: 22rpx;
					padding: 0 20rpx 0 4rpx;
					display: inline-flex;
					align-items: center;
					font: 400 22rpx/20rpx PingFang SC;
					color: #DBA954;
					image{
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
						border-radius: 50%;
					}
				}
				.shareTit{
					margin: 28rpx 0 16rpx 0;
					font: 600 32rpx/52rpx PingFang SC;
					color: #333;
				}
				.contentText{
					font: 400 28rpx/48rpx PingFang SC;
					color: #333;
					margin: 16rpx 0;
				}
				.time{
					font: 400 24rpx/44rpx PingFang SC;
					color: #939393;
				}
			}
			
			// 包含商品
			.G_goodsView {
				margin: 0rpx 32rpx 0 32rpx;
				background: #f6f7fb;
				border-radius: 10rpx;
				padding: 22rpx 32rpx;
				display: flex;
				align-items: center;
				.G_goodsLeft {
					font-size: 28rpx;
					font-weight: bold;
					color: #2b2b2b;
					margin-right: 30rpx;
					flex: 1;
				}
				.G_goodsList {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex: 1;
					.G_goodsFor {
						display: flex;
						align-items: center;
						.G_goodsItem {
							width: 66rpx;
							height: 66rpx;
							overflow: hidden;
							border-radius: 4rpx;
							margin-right: 24rpx;
						}
					}
					.G_goodsIcon {
						width: 36rpx;
						height: 36rpx;
						overflow: hidden;
						border-radius: 4rpx;
					}
				}
			}
			
			.bottom{
				margin: 16rpx 0;
				padding-bottom: constant(safe-area-inset-bottom);				padding-bottom: env(safe-area-inset-bottom);
				background-color: #fff;
				.tabNav{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 28rpx;
					border-bottom: 2rpx solid #F4F4F4;
					font: 400 30rpx/40rpx PingFang SC;
					color: #A0A0A0;
					.left{
						display: flex;
						align-items: center;
						.forward{
							margin-right: 60rpx;
							text{position: relative;}
							text::before{
								content:'';
								position:absolute;
								bottom:0px;
								width:60rpx;
								bottom: -10rpx;
								height: 6rpx;
								left:50%;
								transform: translateX(-50%);
								background-color: transparent;
								border-radius: 4rpx;
								z-index: 20;
							}
							.text::before{
								background-color: #DBA954;
							}
						}
						.navActive{
							color: #0A0605;
						}
					}
					.toStar{
						text{position: relative;}
						text::before{
							content:'';
							position:absolute;
							bottom:0px;
							width:60rpx;
							bottom: -10rpx;
							height: 6rpx;
							left:50%;
							transform: translateX(-50%);
							background-color: transparent;
							border-radius: 4rpx;
							z-index: 20;
						}
						.text::before{
							background-color: #DBA954;
						}
						.navActive{
							color: #0A0605;
						}
					}
				}
				.forList{
					padding: 24rpx;
					.item{
						display: flex;
						// align-items: center;
						image{
							margin-top: 28rpx;
							width: 56rpx;
							height: 56rpx;
							flex-shrink: 0;
							border-radius: 50%;
						}
						font: 400 20rpx/30rpx PingFang SC;
						color: #939393;
						.right{
							width: 100%;
							padding: 28rpx 0;
							border-bottom: 2rpx solid #F4F4F4;
							margin-left: 16rpx;
							.time{
								display: flex;
								align-items: center;
								span{
									margin-right: 16rpx;
									font: 400 24rpx/40rpx PingFang SC;
									color: #333;
								}
							}
						}
					}
				}
				.list{
					margin-top: 16rpx;
					padding: 12rpx 24rpx;
					margin-bottom: 80rpx;
					background-color: #fff;
					.item{
						display: flex;
						image{
							width: 56rpx;
							height: 56rpx;
							flex-shrink: 0;
							border-radius: 50%;
							margin-right: 16rpx;
						}
						.ask{
							.name{
								display: flex;
								align-items: center;
								font: 400 20rpx/40rpx PingFang SC;
								color: #939393;
								span{
									 
									background-color: #F6F7FB;
									border-radius: 28rpx;
									padding: 0 12rpx;
									height: 28rpx;
									font: 400 20rpx/28rpx PingFang SC;
									color: #333;
									margin-left: 8rpx;
								}
							}
							.info{
								// display: flex;
								font: 400 24rpx/44rpx PingFang SC;
								color: #333;
								span{
									font: 400 20rpx/40rpx PingFang SC;
									color: #939393;
									margin-left: 16rpx;
								}
							}
						}
						.askList{
							display: flex;
							flex-direction: column;
							.item{margin-top: 16rpx;}
							display: flex;
							image{
								flex-shrink: 0;
								width: 48rpx;
								height: 48rpx;
								margin-right: 16rpx;
								border-radius: 50%;
							}
						}
					}
				}
			}
		}
		
		.replyInput{
			width: 100%;
			position: fixed;
			bottom: 0;
			box-shadow: 0 0 12rpx #F1F1F1;
			left: 0;
			height: 80rpx;
			height: calc(80rpx+ constant(safe-area-inset-bottom));			height: calc(80rpx + env(safe-area-inset-bottom));			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			background-color: #fff;
			input{
				width: 702rpx;
				height: 60rpx;
				margin: 10rpx auto;
				background-color: #F1F1F1;
				padding: 0 20rpx;
				border-radius: 30rpx;
			}
		}
		
		// 包含商品弹出框
		.popupTitle {
			font-size: 32rpx;
			font-weight: 500;
			color: #0a0605;
			text-align: center;
			position: fixed;
			width: 100%;
			background: #fff;
			top: 0;
			padding: 34rpx 0 10rpx 0;
			z-index: 1;
		}
		.TextLenght {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		
		.TextLenghtTwo {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.ScrollList {
			background: #fff;
			margin-top: 54rpx;
			padding: 50rpx 32rpx 32rpx 32rpx;
		
			.ListItem {
				box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.06);
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				padding: 28rpx;
				justify-content: space-between;
				margin-bottom: 40rpx;
				.listLeft {
					display: flex;
					align-items: center;
					.ListImage {
						width: 124rpx;
						height: 124rpx;
						overflow: hidden;
						border-radius: 8rpx;
						margin-right: 16rpx;
					}
					.ListTitle {
						font-size: 26rpx;
						font-weight: 500;
						color: #505050;
						flex: 1;
						margin-bottom: 14rpx;
					}
					.ListShop {
						font-size: 22rpx;
						font-weight: 400;
						color: #c3ab7c;
						margin-bottom: 6rpx;
						padding: 2rpx 8rpx;
						background: rgba(195, 171, 124, 0.1);
						border-radius: 4rpx;
						width: max-content;
					}
					.ListPirce {
						font-size: 22rpx;
						font-weight: 400;
						color: #e5675a;
					}
				}
			}
		}
	}
</style>
